Modern frameworks like Vue and React start with inline CSS inside individual components. For example, in a Vue single file component, we include all the Javascript, HTML, and CSS in one .vue file. There is usually a build step or some computation which compiles these changes into chunks, which are loaded into the page based on what components are visible to the user.

I can appreciate that this may be the most efficient way to compile CSS for multiple components and load it into a page.

My question relates primarily to performance. Suppose instead of compiling all of the component styles into chunks, React or Vue did sent this instead, when a component is rendered:

<div id="someComponent">
    <!-- My component HTML goes here -->
</div>
<style>
     /* Associated styles */
     #someComponent {
         color: red;
     }
</style>

That means instead of having a CSS chunk file, the styles are simply inlined and included beside the component they relate to on the live website.

I know this is messy, but my question is, are there any performance concerns with doing this? I would've thought this might actually be more performant, since loading a chunk requires an HTTP request, which obviously has an overhead, whereas this is included in a single HTTP request when the user opens the webpage.